<template>
  <div class="login">
    <img class="bg" src="../assets/img/login_bg.jpg" alt />
    <div class="center">
      <div class="left">
        <div class="title">
          <span>欢迎登陆</span>
          <img class="right_icon" src="@/assets/img/login/login.png" alt />
        </div>
        <div class="line"></div>

        <img class="logo_img" src="@/assets/img/login/login_logo.png" alt />
      </div>
      <div class="right">
        <el-input placeholder="请输入用户名" v-model="username" size="normal" class="username">
          <template slot="prepend">
            <i class="el-icon-user"></i>
          </template>
        </el-input>
        <el-input
          placeholder="请输入密码"
          v-model="password"
          type="password"
          size="normal"
          class="password"
        >
          <template slot="prepend">
            <i class="el-icon-unlock"></i>
          </template>
        </el-input>
        <el-checkbox v-model="checked" class="remember" @change="remember">记住用户名</el-checkbox>
        <el-button type="primary" :loading="loading" @click="login">登陆</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      checked: false,
      loading: false
    };
  },
  mounted() {
    this.getRemember();
  },
  methods: {
    //进入页面获取记住的账号
    getRemember(){
      const username = localStorage.getItem('username');
      const ifRemember = localStorage.getItem('ifRemember');
      if(username){
        this.username = username;
      }
      if(ifRemember && ifRemember == 'true'){
        this.checked = true;
      }else{
        this.checked = false;
      }
    },
    //记住密码
    remember() {
      const { username, password } = this;
      const ifRemember = this.checked;

      if (username) {
        if (ifRemember) {
          localStorage.setItem("username", username);
          localStorage.setItem("ifRemember", true);
        } else {
          localStorage.removeItem("username");
          localStorage.setItem("ifRemember", false);
        }
      } else {
        this.$message({
          message: "用户名不能为空!",
          type: "error"
        });
      }
    },
    async login() {
      const { username, password } = this;
      if (username && password) {
        const res = await this.$api.userApi.login({
          name: username,
          pwd: password
        });
        console.log(res);
        if(res.data.code == 200){
          this.$store.commit('changeUserInfo',res.data.data);
          localStorage.setItem('user_token',res.data.data.token.token);
        }
      } else {
        this.$message({
          message: "用户名或密码不能为空!",
          type: "error"
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.remember {
  margin: 40px 0 10px;
}
.login {
  display: flex;
  align-items: center;
  justify-content: center;

  .bg {
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    min-width: 1280px;
  }
  .center {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 700px;
    height: 320px;
    background: rgba(60, 58, 153, 0.6);
  }
  .left {
    width: 400px;
    height: 100%;
    color: #fff;
    display: flex;
    padding: 40px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    .title {
      width: 100%;
      display: flex;
      align-items: center;

      span {
        margin-right: 20px;
        font-size: 26px;
      }
    }
    .right_icon {
      width: 26px;
      height: 26px;
      transform: translateY(2px);
      // background-color: #fff;
    }
    .line {
      width: 280px;
      height: 1px;
      border-top: 1px solid #fff;
      margin: 10px 0 20px;
    }
    .logo_img {
      // background-color: #fff;
      width: 160px;
      height: 40px;
    }
  }
  .right {
    width: 300px;
    background-color: #fff;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    .username {
      margin-top: 40px;
    }
    .password {
      margin-top: 16px;
    }
  }
}
</style>